<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
  <title>Slideshow</title>
  <script src="animation.js"></script>
  <style type="text/css">
    
    body {
      background: white;
      font-family: "Bitstream Vera Sans";
      color: black;
      margin: 0;
      padding: 0;
      }
    
    #wrapper {
      position: absolute;
      border: 1px solid #aaa;
      width: 400px;
      height: 156px;
      top: 50%;
      margin-top: -78px;
      left: 50%;
      margin-left: -200px;
      overflow: hidden;
      background: black;
      font-size: 12px;
      }
    
    h1 {
      width: 100%;
      height: 32px;
      margin: 0;
      padding: 0.5em 0;
      color: #111;
      }
    
    #thumbnails img { 
      display: block;
      float: left;
      opacity: 0.5;
      height: 100px;
      margin: 0;
      padding: 0;
      line-height: 1;
      overflow: hidden;
      }
      
    #thumbnails, #thumbnails li {
      margin: 0; 
      padding: 0;
      width: 400px;
      display: block;
      }
    
    #thumbnails span {
      position: absolute;
      top: 120px;
      width: 400px;
      left: -400px;
      height: 36px;
      text-align: center;
      display: block;
      color: #000;
      overflow: hidden;
      }
  </style>
  
  <script type="text/javascript">
    onload=function(){
      // first we find our thumnail images, and attach an animation handler 
      // to their mouseover and mouseout methods
      // Provides fancy fading
      var images = document.getElementById('thumbnails').getElementsByTagName('img');
      for (var i=0, img; img=images[i];i++){
        
        img.onmouseover = function(e){
          // To ensure that Gecko browsers also see the event target
          e = e||window.event
          // This line adds the animation
          var imageAnimation = e.target.createAnimation();
          // Then we set a speed. A default speed of 6 is set, but we want it faster
          imageAnimation.speed = 20;
          // Here we add which type of animation we want, and we call the run()
          imageAnimation.addAnimation('opacity',0.5,1.0);
          // Finally, run the animation
          imageAnimation.run();
          
          // Add and attach an event to the span as well
          var textAnimation = e.target.nextSibling.createAnimation();
          
          // The accelerationProfile property affects how the speed is affected through the animation
          // 
          textAnimation.accelerationProfile = textAnimation.sine;
          textAnimation.speed = 66;
          // Almost any CSS property can be animated...
          textAnimation.addAnimation('color','#000','#fff')
          textAnimation.addAnimation('left', '-400px', '0px')
          textAnimation.run();
          
        }

        img.onmouseout = function(e){
          // everything here is equivalent to what you saw in the mouseover handler
          var anim = e.target.createAnimation();
          anim.speed = 20;
          anim.addAnimation('opacity',1,0.5).run();
          var textAnimation = e.target.nextSibling.createAnimation();
          textAnimation.accelerationProfile = textAnimation.sine;
          textAnimation.speed = 66;
          textAnimation.addAnimation('color','#fff','#000');
          textAnimation.addAnimation('left', '0px', '-400px');
          textAnimation.run();
        }
      }
    }
  
  </script>
</head>
<body>
<h1>Opera animation library</h1>
<p>This is a demonstration of the <a href="http://my.opera.com/community/dev/widgets/animation/lib/">Opera animation Library</a>. Hover over any of the images to see the animation.</p>
<div id="wrapper">
<ul id="thumbnails">
<li><img src="macro-cake.jpg" alt="Cakes look delicious in macro view"><span>Cake is good for you</span></li>
<li><img src="macro-cross.jpg" alt="Metal crosses make good imagery"><span>A cross.</span></li>
<li><img src="macro-money.jpg" alt="Gambling machines dispense money"><span>More coins than you care to count</span></li>
</ul>
</div>
</body>
</html>